<template>
	<view class="wrapper">
		<div class="main bfff">
			<div class="videos center" v-for="(v,i) in list" :key="i" @click="prevVideo(v)">
				<div class="  video-box posr" >
					<video :show-center-play-btn="false" :src="v.iphoneUrl" :controls="false" class="video-cover"></video>
					<image :src="v.coverUrl" mode="aspectFill" class="video-cover"></image>
					<div class="f26 nowrap cfff posa ">01:46</div>
					<div class="posa play center">
						<u-icon name="play-circle-fill" color="#fff" size="45"></u-icon>
					</div>
					<!-- <div class="posa cfff f20 type">预告片</div> -->
				</div>
				<!-- <div class="flex1 ml20">
					<div class="f30 fbold c333">《误杀2》爸爸的愿望爸爸的愿望愿望爸爸的愿望愿望爸爸的愿望</div>
				</div> -->
			</div>
		</div>
		<u-empty text="暂无视频" v-if="list.video==''" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:{}
			};
		},
		onLoad() {
			this.list = uni.getStorageSync('video')
			console.log("this.list="+JSON.stringify(this.list))
			let that = this
			uni.setNavigationBarTitle({
				title: `全部视频`
			})
		},
		methods: {
			prevVideo(v) {
				uni.previewMedia({
					sources: [{
						url: v.iphoneUrl,
						type: 'video'
					}]
				})
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 20rpx 26rpx;
		.videos{
			padding:25rpx 0 ;
			border-bottom: 1rpx solid #e0e0e1;
		}
		.video-box {
			width: 700rpx;
			height: 380rpx;
			border-radius: 10rpx;
			
			.type{
				top: 4rpx;
				left: 4rpx;
				border-radius: 6rpx;
				padding: 8rpx 10rpx;
				background: rgba(0, 0, 0, .7);
				transform: scale(.8);
			}
			.play {
				width: 40rpx;
				height: 40rpx;
				left: calc(50% - 20rpx);
				top: calc(50% - 20rpx);
			}

			.nowrap {
				left: 15rpx;
				bottom: 10rpx;
				width: 280rpx;
			}

			.video-cover {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.header {
		width: 100%;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		box-shadow: 0 2rpx 10rpx 1rpx #e0e0e1;
	}
</style>